<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{myname}}
			<!-- {{globalName}} -->
			<button @click="myname='xiaofang'">阿纳 哈哈</button>
			<div ref="div">1212122122</div>
		</div>
		<script>
			var vm=new Vue({
				el:'#app',
				data:{
					myname:'zhangsan'
				},
				// 创建前
				beforCreate(){
					console.log("beforeCreate",this.myname)
				},
				// 创建后
				created(){
					console.log("created",this.myname)
					// 状态初始化
					this.myname=this.myname+'1234'
					// 挂载到当前实例的一些属性
					this.globalName="this可以直接访问的属性" //this下面的属性
				},
				// 挂载前
				beforeMount(){
					// console.log("beforeMount",document.getElementById("app"),innerHTML)
					console.log(this.$el) //在模板解释之前最后一次修改模板节点
				},
				// 挂载后
				mounted(){
					// 拿到真实的dom
					console.log("mounted",document.getElementById("app"),innerHTML)
					// 发ajax aios
					// 依赖于dom创建之后,才进行初始化工作的插作
				},
				//更新前
				beforeUpdate() {
					console.log("beforeUpdate","更新之前")
				},
				// 更新后
				updated() {
					console.log("updated","更新之后")
				},
				// 销毁前
				beforeDestroy() {
					console.log("beforeDestroy","销毁之前")
					console.log(this.$refs.div)
					console.log(this.myname)
					console.log(vm)
				},
				// 销毁后
				destroyed() {
					console.log("destroyed","销毁之后")
					console.log(this.$refs.div)
					console.log(this.myname)
					console.log(vm)
				}
			})
		</script>
	</body>
</html>